<template>
  <div   :style="{'border':'1px solid #efefef','width': listCheckBoxPanelParam.width,'height': listCheckBoxPanelParam.height}" ref="yfuListCheckBoxPanelDiv">
    <div style="background:#eeeeee;height:30px;font-weight: bold;width:100%;line-height:30px;font-size:13px">
      &nbsp;{{listCheckBoxPanelParam.title}}
    </div>
    <div style="margin-top:5px;margin-bottom: 5px;height:30px"  v-if="listCheckBoxPanelParam.showSearch">
      <el-input v-model="searchValue" size="mini" placeholder="输入名称进行过滤" ></el-input>
    </div>
    <div  :style="{'width': '100%','height': listCheckBoxPanelHeight}" class="tfscrollbarstyle">

      <el-checkbox-group v-model="checkeds" style="padding-left:5px;line-height:25px">
        <div v-for="data in datas" :key="data.id">
          <el-checkbox  :label="data" >{{data[name]}}</el-checkbox>
        </div>
      </el-checkbox-group>
    </div>
  </div>
</template>
<style scoped>


</style>
<script type="text/javascript">
  import {yfuPost} from '@/utils/request.js'
  import {removeArray} from '@/utils/ArrayUtils.js'
  import {yfuErrorToast} from '@/utils/yfuMessage.js'
  export default {
    props: ['listCheckBoxPanelParam'],
    watch: {
      searchValue (val) {
        this.filterArray(val)
      }
    },
    data () {
      return {
        checkeds: [],
        name: this.listCheckBoxPanelParam.name,
        datas: [],
        datasCopy: [],
        listCheckBoxPanelHeight: '100px',
        searchValue: ''
      }
    },
    created () {
      this.getData()
    },
    mounted () {
      let h = this.$refs.yfuListCheckBoxPanelDiv.getBoundingClientRect().height
      if (h === 0 || h === '0') {
        h = this.$refs.yfuListCheckBoxPanelDiv.style.height
      }
      if (typeof h === 'string') {
        let index = h.indexOf('px')
        let hNumber = h.substring(0, index)
        h = hNumber - 70
        this.listCheckBoxPanelHeight = h + 'px'
      } else {
        if (h > 0) {
          h = h - 70
          this.listCheckBoxPanelHeight = h + 'px'
        }
      }
      console.log(this.listCheckBoxPanelHeight)
    },
    methods: {
      getData () {
        let cThis = this
        // 添加参数
        let tParam = {}
        if (cThis.listCheckBoxPanelParam.urlParam != null && cThis.listCheckBoxPanelParam.urlParam !== '') {
          tParam = cThis.listCheckBoxPanelParam.urlParam
        }
        yfuPost(cThis.listCheckBoxPanelParam.baseURL, cThis.listCheckBoxPanelParam.url, tParam, function (data) {
          if (Array.isArray(data)) {
            cThis.datas = data
            cThis.datasCopy = data
          } else {
            cThis.datas = data.datas
            cThis.datasCopy = data.datas
          }
        })
      },
      // 构建参数
      createParam () {
        let param1 = {}
        if (this.listCheckBoxPanelParam.urlParam != null) {
          for (let key of Object.keys(this.listCheckBoxPanelParam.urlParam)) {
            param1[key] = this.listCheckBoxPanelParam.urlParam[key]
          }
        }
//        if (this.listCheckBoxPanelParam.showSearch) {
//          if (this.searchValue == null || this.searchValue === '') {
//            return param1
//          }
//          param1[name] = this.searchValue
//        }
        return param1
      },
      filterArray (val) {
        if (val == null || val === '') {
          this.datas = this.datasCopy
        } else {
          let filterarr = []
          for (let arr of this.datasCopy) {
            if (arr[this.name].indexOf(val) >= 0) {
              filterarr.push(arr)
            }
          }
          this.datas = filterarr
        }
      },
      getCheckeds () {
        return this.checkeds
      },
      // 添加选项
      addItems (items) {
        if (typeof items !== 'object') {
          console.log('参数必须为对象或者数组')
          return ''
        }
        if (Array.isArray(items)) {
          for (let item of items) {
            if (!this.checkMulti(item)) {
              this.datas.push(item)
            }
          }
        } else {
          if (!this.checkMulti(items)) {
            this.datas.push(items)
          }
        }
      },
      // 检测是否重复
      checkMulti (item) {
        for (let data of this.datas) {
          if (item.id === data.id) {
            return true
          }
        }
        return false
      },
      // 删除选项
      removeItems () {
        if (this.checkeds.length === 0) {
          yfuErrorToast('至少选中一行')
        } else {
          this.datas = removeArray(this.datas, this.checkeds)
          // 删除完成checkeds变为空
          this.checkeds = []
        }
      },
      // 得到所有DATAS
      getAllData () {
        return this.datas
      }
    }
  }
</script>
